<!-- 支付 -->
<template>
  <div class="">
    <div class="tip">
      <a>会员配置：</a>
      设置本机构对内展示的资源及解锁方式
    </div>
    <s-table ref="table" size="default" rowKey="id, enabled, title" :columns="columns" :data="loadData"
      :rowSelection="null" :showPagination="false">
      <!-- 小程序列表展示 -->
      <template slot="listShow" slot-scope="text, record, index">
        <a-switch :defaultChecked="record.listShow === 0"
          @change="(checked) => handleChangeSwitch(checked, 'listShow', record, index)" />
      </template>

      <!-- 小程序详情展示 -->
      <template slot="detailShow" slot-scope="text, record, index">
        <a-switch :defaultChecked="record.detailShow === 0"
          @change="(checked) => handleChangeSwitch(checked, 'detailShow', record, index)" />
      </template>

      <!-- 解锁审核开关 -->
      <template slot="isAudit" slot-scope="text, record, index">
        <a-select v-if="record.projectType === 1" v-model="record.isAudit" style="width: 100px"
          @change="handleChangeField(record, index)">
          <a-select-option :value="1">审核</a-select-option>
          <a-select-option :value="0">无需审核</a-select-option>
        </a-select>
      </template>

      <!-- 审核/进群人员设置 -->
      <template slot="managerList" slot-scope="text, record">
        <a-select v-if="record.projectType === 1" class="select-user" :value="text | getManagerList" mode="multiple"
          style="width: 220px" placeholder="请选择" @select="(e) => handleSelect(e, record.projectType)"
          @deselect="(e) => handleDeselect(e, record)">
          <a-select-option v-for="item in user_list" :key="item.userId">{{ item.userName }}</a-select-option>
        </a-select>
      </template>

      <!-- 会员解锁价格 -->
      <template slot="memberPrice" slot-scope="text, record, index">
        <template v-if="record.projectType === 1">
          <div class="table-item">
            <span class="label">解锁联系方式（￥）</span>
            <a-input-number v-model="record.memberPrice1" :min="0" :max="100" placeholder="请输入" class="input"
              @change="handleChangeField(record, index)" />
          </div>
          <div class="table-item">
            <span class="label">秘书处联络（￥）</span>
            <a-input-number v-model="record.memberPrice2" :min="0" :max="100" placeholder="请输入" class="input"
              @change="handleChangeField(record, index)" />
          </div>
        </template>
      </template>

      <!-- 非会员解锁价格 -->
      <template slot="price" slot-scope="text, record, index">
        <template v-if="record.projectType === 1">
          <div class="table-item">
            <span class="label">解锁联系方式（￥）</span>
            <a-input-number v-model="record.price1" :min="0" :max="100" placeholder="请输入" class="input"
              @change="handleChangeField(record, index)" />
          </div>
          <div class="table-item">
            <span class="label">秘书处联络（￥）</span>
            <a-input-number v-model="record.price2" :min="0" :max="100" placeholder="请输入" class="input"
              @change="handleChangeField(record, index)" />
          </div>
        </template>
      </template>
    </s-table>

    <a-button type="primary" @click="handleTenantSave" style="margin-top: 20px">保存</a-button>
  </div>
</template>

<script>
import { STable } from '@/components'
import { InnerTenantInfo, InnerTenantSave } from '@/api/system/base'
import { getUserList } from '@/api/system/system'
import { ManagerAdd, ManagerDel } from '@/api/business/source'
import EditableCell from '@/components/EditableCell'
import { Modal } from 'ant-design-vue'
export default {
  components: {
    STable,
    EditableCell,
  },
  data() {
    return {
      columns: [
        {
          title: '资源',
          dataIndex: 'projectName',
          width: 80,
        },
        {
          title: '小程序列表展示',
          dataIndex: 'listShow',
          width: 120,
          scopedSlots: { customRender: 'listShow' },
        },
        {
          title: '小程序详情展示',
          dataIndex: 'detailShow',
          width: 120,
          scopedSlots: { customRender: 'detailShow' },
        },
        {
          title: '解锁审核开关',
          dataIndex: 'isAudit',
          width: 100,
          scopedSlots: { customRender: 'isAudit' },
        },
        {
          title: '会内发起审核人',
          dataIndex: 'managerList',
          width: 150,
          scopedSlots: { customRender: 'managerList' },
        },
        {
          title: '【会员】解锁价格',
          width: 150,
          scopedSlots: { customRender: 'memberPrice' },
        },
        {
          title: '【非会员】解锁价格',
          width: 150,
          scopedSlots: { customRender: 'price' },
        },
      ],
      dataSource: [],
      loadData: async () => {
        this.listLoading = true
        return InnerTenantInfo()
          .then((res) => {
            this.listLoading = false
            if (res.code === 0) {
              this.dataSource = res.data || []
              return res
            } else {
              this.$message.error(res.msg)
            }
          })
          .catch((err) => {
            this.listLoading = false
            this.$message.error(err.msg)
          })
      },
      user_list: [],
    }
  },
  filters: {
    getManagerList(e) {
      return (e || []).map((item) => item.systemId)
    },
  },
  computed: {},
  watch: {},
  methods: {
    handleChangeSwitch(checked, field, record, index) {
      record[field] = checked ? 0 : 1
      this.dataSource.splice(index, 1, { ...record })
    },
    handleChangeField(record, index) {
      this.dataSource.splice(index, 1, { ...record })
    },
    async GetUserList() {
      let res = await getUserList()
      this.user_list = res.rows || []
    },
    async handleSelect(val, projectType) {
      let item = this.user_list.find((f) => f.userId === val) || {}
      let { code, msg } = await ManagerAdd({
        systemId: val,
        systemName: item.userName,
        systemPhone: item.phonenumber,
        projectType,
        type: 2, //会内
      })
      this.$message[code === 0 ? 'success' : 'error'](msg)
      if (code != 0) this.userIds.pop()
      this.$refs.table.refresh()
      // this.getManagerList()
    },
    async handleDeselect(val, record) {
      let item = (record.managerList || []).find((f) => f.systemId === val) || {}
      let { code, msg } = await ManagerDel(item.id)
      this.$message[code === 0 ? 'success' : 'error'](msg)
      // this.getManagerList()
      this.$refs.table.refresh()
    },
    async handleTenantSave() {
      let list = this.dataSource.filter((f) => f.listShow === 0)
      if (!list.length) return this.$message.error('小程序列表展示至少开启一项')

      let item = this.dataSource[0]
      if (item.isAudit === 1 && !item.managerList.length) return this.$message.error('解锁需审核时，审核人不能为空')

      let { code, msg } = await InnerTenantSave([...this.dataSource])
      if (code === 90001) {
        Modal.confirm({
          title: '提示',
          content: msg,
          cancelText: '暂不开通',
          okText: '去开通',
          onCancel: () => {
            this.$refs.table.refresh()
          },
          onOk: () => {
            this.$router.push({
              path: '/system/paySettings',
              query: {
                titleKey: 'onlinePayment'
              }
            })
          },
        })
      } else if (code === 0) {
        this.$message.success('保存成功')
      }
    },
  },
  created() {
    this.GetUserList()
  },
  mounted() { },
}
</script>
<style lang="less" scoped>
.title {
  font-size: 16px;
  font-weight: bold;
  padding: 10px 0;
}

.tip {
  padding: 10px 0;
}

.inline {
  display: flex;
  align-items: center;
}

.input {
  width: 200px;
  margin-right: 10px;
}

.table-item {
  display: flex;
  align-items: center;
  margin-top: 5px;

  .label {
    flex-shrink: 0;
  }
}
</style>
